<template>
  <div class="page-view">
    <RecentExam />
    <ul class="exam-list">
      <li class="exam-entry">
        <div class="info">
          <h3 class="course-test-name">
            中医基础
          </h3>
          <h5 class="class-subject-name">
            中医确有专长
          </h5>
          <div class="done-time">
            12人做过
          </div>
        </div>
        <div class="exam-state">
          开始做题
        </div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {
    RecentExam: () => import('components/Exam/RecentExam.vue'),
  },
  data () {
    return {
      recentExam: {
        ExamName: '9会计实务模拟考试试卷',
        CountdownDays: 23,
      },
      isAVisitor: this.$store.state.userInfo.UserId === '-1',
      pageNum: 1,
      examList: [],
    }
  },
  // created () {
  // },
  methods: {
    fetchDailyData () {
      const url = this.isAVisitor ? 'Exam/GetDailyExamListForVisitorH5'
        : 'exam/GetCourseYearAndDailyPracticeInfo'
      this.$axios({
        url,
        data: {
          Page: this.pageNum,
          PageSize: 10,
          // 报名
          Type: 1,
          ClassId: 229,
        },
      }).then(res => {
        this.$set(this.$data, 'examList', res)
      })
    },
  },
})
</script>

<style lang="scss" scoped>
.page-view {
  min-height: 100%;
  background: #fff;
}
.exam-list {
  padding-left: 24px;
}
.exam-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 24px 20px 3px;
  + .exam-entry {
    // border-top: 1px solid #E9E9E9;
    @include px1border(top, #E9E9E9);
  }
}
.course-test-name {
  font-size: 32px;
  color: #333;
  margin-bottom: 12px;
}
.class-subject-name {
  font-size: 28px;
  color: #666;
  margin-bottom: 23px;
}
.done-time {
  color: #A4A9B2;
  font-size: 22px;
}
.exam-state {
  color: $primary-web;
  font-size: 24px;
  &.not-exist {
    color: #999;
  }
}

</style>
